import { ref } from 'vue';
import { ElButton, ElIcon, ElTag, ElTooltip, TableV2FixedDir } from 'element-plus';
import type { Column } from 'element-plus';
import { h } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();

function getColumns(showCellline: boolean, checkDetail:any): Column<any>[] {
    return [
        {
            key: 'ecDNA',
            dataKey: 'EcDNAId',
            title: 'EcDNAId',
            minWidth: 120,
            width: 120,
            class: 'tissue',
            sortable: true,
            cellRenderer: ({ rowData }: { rowData: any }) =>
                h(
                    'a',
                    {
                        class: 'tissue',
                        onClick: () => checkDetail(rowData)
                    },
                    rowData.EcDNAId // 文本内容
                )
        },
        showCellline
            ? {
                  key: 'cellline',
                  dataKey: 'Cellline',
                  title: 'Cellline',
                  minWidth: 150,
                  width: 150,
                  sortable: true
              }
            : {
                  key: 'tissue',
                  dataKey: 'SampleType',
                  title: 'Tissue',
                  minWidth: 150,
                  width: 150,
                  sortable: true
              },
        {
            key: 'lineage',
            dataKey: 'OncotreeLineage',
            title: 'OncotreeLineage',
            minWidth: 200,
            width: 200,
            sortable: true
        },
        { key: 'major', dataKey: 'MajorTumorType', title: 'MajorTumorType', minWidth: 200, width: 200, sortable: true },
        { key: 'tumor', dataKey: 'TumorType', title: 'Tumor Type', minWidth: 130, width: 130, sortable: true },
        {
            key: 'cancer',
            dataKey: 'CancerGene',
            title: 'CancerGene',
            minWidth: 150,
            width: 150,
            sortable: true
        },
        { key: 'chrom', dataKey: 'Chrom1', title: 'Chrom', minWidth: 110, width: 110, sortable: true },
        { key: 'start', dataKey: 'Start', title: 'Start', minWidth: 110, width: 110, sortable: true },
        { key: 'end', dataKey: 'End', title: 'End', minWidth: 110, width: 110, sortable: true },
        { key: 'seq', dataKey: 'Type', title: 'Sequence', minWidth: 110, width: 110, sortable: true },
        {
            key: 'cn',
            dataKey: 'CN_mean',
            title: 'CN_mean',
            minWidth: 110,
            width: 110,
            sortable: true
        },
        {
            key: 'split',
            dataKey: 'SplitCount_mean',
            title: 'SplitCount_mean',
            minWidth: 170,
            width: 170,
            sortable: true
        },
        { key: 'len', dataKey: 'Length', title: 'Length', minWidth: 180, width: 180 },
        {
            key: 'file',
            dataKey: 'Filename',
            title: 'File Name',
            minWidth: 330,
            width: 330,
            sortable: true
        },
        { key: 'gnum', dataKey: 'Gene_num', title: 'Gene Num', minWidth: 130, width: 130, sortable: true },
        { key: 'cnum', dataKey: 'Cancergene_num', title: 'Cancergene Num', minWidth: 160, width: 160, sortable: true },
        {
            key: 'final',
            dataKey: 'final_score',
            title: 'Final Score',
            minWidth: 130,
            width: 130,
            sortable: true,
            fixed: TableV2FixedDir.RIGHT
        }
    ];
}

const searchItems = ref([
    {
        type: 'tab-multi-select',
        value: 'Cellline',
        tabs: [
            { label: 'Cell Line', value: 'Cellline', options: [], type: 'tab-multi-select', isChosen: true },
            { label: 'Tissue', value: 'SampleType', options: [], type: 'tab-multi-select', isChosen: false }
        ]
    },
    { label: 'Gene', value: 'Gene', options: [], type: 'multi-select' },
    { label: 'Cancer Gene', value: 'CancerGene', options: [], type: 'grouped-single-select' },
    { label: 'Chrom', value: 'Chrom1', options: [], type: 'Chrom' },
    { label: 'Tumor Type', value: 'TumorType', options: [], type: 'single-select' },
    { label: 'File Name', value: 'Filename', options: [], type: 'multi-select' }
]);


export { getColumns, searchItems };
